<template>
  <div class="radar-container">
    <h2>账单管理能力分布看板</h2>
    <input v-model="searchTerm" type="text" placeholder="搜索..." @input="handleSearch" />
    <div ref="radarChart" style="width: 900px; height: 700px;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const radarChart = ref(null);
const searchTerm = ref('');
const filteredData = ref([]);

const indicators = [
  { name: '账单录入', max: 100 },
  { name: '账单审核', max: 100 },
  { name: '账单分析', max: 100 },
  { name: '账单统计', max: 100 },
  { name: '异常处理', max: 100 },
  { name: '系统操作', max: 100 },
  { name: '客户沟通', max: 100 },
  { name: '团队协作', max: 100 }
];

const originalData = [
  {
    value: [85, 78, 92, 88, 75, 68, 82, 76],
    name: '平均'
  },
  {
    value: [95, 88, 98, 95, 85, 78, 92, 85],
    name: '上限'
  },
  {
    value: [75, 68, 85, 80, 65, 58, 72, 65],
    name: '下限'
  }
];

function handleSearch() {
  if (!searchTerm.value) {
    updateChart(indicators, originalData);
    return;
  }

  const searchLower = searchTerm.value.toLowerCase();
  const filteredIndicators = indicators.filter(indicator => indicator.name.toLowerCase().includes(searchLower));
  const filteredValues = originalData.map(data => ({
    value: data.value.filter((_, index) => filteredIndicators.some(indicator => indicator.name === indicators[index].name)),
    name: data.name
  }));

  updateChart(filteredIndicators, filteredValues);
}

function updateChart(indicators, data) {
  const myChart = echarts.init(radarChart.value);

  const option = {
    title: {
      text: '账单管理能力分布看板',
      left: 'center'
    },
    tooltip: {},
    legend: {
      data: ['平均', '上限', '下限'],
      right: '5%', // 将图例向右移动
      orient: 'vertical' // 设置为垂直排列
    },
    radar: {
      indicator: indicators,
      radius: '70%' // 增大雷达图半径
    },
    series: [
      {
        name: '能力分布',
        type: 'radar',
        data: data
      }
    ]
  };

  myChart.setOption(option);
}

onMounted(() => {
  updateChart(indicators, originalData);
});
</script>

<style lang="less" scoped>
.radar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

h2 {
  font-size: 24px;
  margin-bottom: 10px;
  margin-top: -40px;
}

input {
  width: 100%;
  max-width: 600px;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>